<template>
    <div class="page-container">
        <div class="info" v-if="route.query.id">
            <div class="title">
                <div class="id">合同单号：{{ route.query.id }}</div>
                <div class="state">
                    <div v-if="state.contractState == 2" class="draft">草稿</div>
                    <div v-else class="ReviewedState">
                        <div class="ReviewedState-title">订单状态</div>
                        <div class="toBeReviewed">{{ state.contractState === 1 ? '已审核' : '待审核' }}</div>
                    </div>
                </div>
            </div>
            <div v-if="state.contractState !== 2 || state.draftAgain === true" class="content">
                <el-descriptions size="large" :column="4">
                    <el-descriptions-item label="客户：">Glong italy srl</el-descriptions-item>
                    <el-descriptions-item :span="3" label="公司：">君禾泵业股份有限公司</el-descriptions-item>
                    <el-descriptions-item label="创建时间：">2024-05-01 17:28</el-descriptions-item>
                    <el-descriptions-item label="创建人员：">孙向明</el-descriptions-item>
                    <el-descriptions-item label="最后修改时间：">2024-05-05 18:48</el-descriptions-item>
                    <el-descriptions-item label="最后修改人员：">李今颖</el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <div class="handel">
            <div v-if="state.contractState == 2" class="draft">
                <div @click="saveDraft" class="draft-item">保存为草稿</div>
                <div @click="submit" class="draft-item">提交合同去审核</div>
            </div>
            <div v-else @click="Withdrawal" class="draft-out">撤回审核</div>
        </div>
        <div v-if="state.contractState == 2" class="contentInfo">
            <div class="title">合同基本信息</div>
            <div class="form-container">
                <el-form :inline="true" :model="state.query" :rules="state.rules" label-width="100px" :size="'small'"
                    ref="form">
                    <el-row>
                        <el-col v-if="!route.query.id" :span="6">
                            <el-form-item prop="blNo" label="合同单号">
                                <el-input disabled v-model="state.query.blNo" clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="company" label="公司">
                                <el-select v-model="state.query.company" :remote-method="getCompanyData"
                                    placeholder="请选择计量单位" style="width: 100%" clearable filterable remote
                                    :loading="state.companyLoading">
                                    <el-option v-for="item in state.CompantList" :key="item.id" :label="item.comNameCn"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="companyAddress" label="公司地址">
                                <el-select v-model="state.query.companyAddress" placeholder="请选择计量单位" style="width: 100%"
                                    clearable filterable remote :loading="state.currentLoading">
                                    <el-option v-for="item in companyAddress" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="client" label="客户">
                                <el-select :remote-method="getCustomData" v-model="state.query.client" placeholder="请选择客户"
                                    style="width: 100%" clearable filterable remote :loading="state.clientLoading">
                                    <el-option v-for="item in state.client" :key="item.id" :label="item.comNameCn"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="clientAddress" label="客户地址">
                                <el-select v-model="state.query.clientAddress" placeholder="请选择计量单位" style="width: 100%"
                                    clearable filterable remote :loading="state.currentLoading">
                                    <el-option v-for="item in clientAddress" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="tradeClause" label="贸易条款">
                                <el-select :remote-method="getTradeTermsData" v-model="state.query.tradeClause"
                                    placeholder="请选择计量单位" style="width: 100%" clearable filterable remote
                                    :loading="state.tradeClauseLoading">
                                    <el-option v-for="item in state.tradeClause" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="transportationMode" label="运输方式">
                                <el-select :remote-method="getTransportModeData" v-model="state.query.transportationMode"
                                    placeholder="请选择计量单位" style="width: 100%" clearable filterable remote
                                    :loading="state.transportationModeLoading">
                                    <el-option v-for="item in state.transportationMode" :key="item.value"
                                        :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="destinationCountry" label="运抵国">
                                <el-select :remote-method="getCountryData" v-model="state.query.destinationCountry"
                                    placeholder="请选择计量单位" style="width: 100%" clearable filterable remote
                                    :loading="state.destinationCountryLoading">
                                    <el-option v-for="item in state.destinationCountry" :key="item.id"
                                        :label="item.countryCh" :value="item.countryCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="destinationPort" label="目的港">
                                <el-select :remote-method="lineSelect" v-model="state.query.destinationPort"
                                    placeholder="请选择目的港" style="width: 100%" clearable filterable remote
                                    :loading="state.destinationPortLoading">
                                    <el-option v-for="item in state.destinationPort" :key="item.id" :label="item.nameCh"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="salesman" label="业务员">
                                <el-select v-model="state.query.salesman" :remote-method="getUserData" placeholder="请选择计量单位"
                                    style="width: 100%" clearable filterable remote :loading="state.salesmanLoading">
                                    <el-option v-for="item in state.salesman" :key="item.id" :label="item.realName"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="currency" label="币种">
                                <el-select v-model="state.query.currency" placeholder="请选择币种" style="width: 100%" clearable
                                    filterable remote :remote-method="getCurrentData" :loading="state.currentLoading">
                                    <el-option v-for="item in state.current" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="recDateTime" label="预计出货时间">
                                <el-date-picker v-model="state.query.recDateTime" type="daterange" range-separator="~"
                                    start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 100%"
                                    clearable value-format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div v-else class="content">
            <el-descriptions class="descriptions" :column="4" size="default" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 公司
                        </div>
                    </template>
                    {{ state.query.company }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 公司地址
                        </div>
                    </template>
                    {{ state.query.companyAddress }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 客户
                        </div>
                    </template>
                    {{ state.query.client }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 客户地址
                        </div>
                    </template>
                    {{ state.query.clientAddress }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 贸易条款
                        </div>
                    </template>
                    {{ state.query.tradeClause }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 运输方式
                        </div>
                    </template>
                    {{ state.query.transportationMode }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 运抵国
                        </div>
                    </template>
                    {{ state.query.destinationCountry }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 目的港
                        </div>
                    </template>
                    {{ state.query.destinationPort }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 业务员
                        </div>
                    </template>
                    {{ state.query.salesman }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 币种
                        </div>
                    </template>
                    {{ state.query.currency }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 预计出货时间
                        </div>
                    </template>
                    {{ state.query.recDateTime[0] }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <span>*</span> 发票类型
                        </div>
                    </template>
                    增值税专用发票
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="commodity">
            <div class="title">商品清单</div>
            <div v-if="state.contractState == 2" class="btn">
                <el-button @click="addCommodity" type="primary">新增</el-button>
                <el-button @click="deleteCommodity">删除</el-button>
            </div>
            <div class="table">
                <AppVxeTable class="vex-table-primary" :isPagination="true" stripe :tableData="state.tableData.data"
                    :height="0" :tableOption="state.tableData.option" v-loading="state.tableLoading">
                    <vxe-column v-if="state.contractState == 2" type="checkbox" width="40" align="center" fixed="left" />
                    <vxe-column sortable field="company" title="税号" align="center" width="120" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-input v-if="state.contractState == 2" v-model="row.company" clearable placeholder=""
                                style="width: 100%" />
                            <span v-else>{{ row?.company }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="productModel" width="120" title="产品型号" align="center" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-select v-if="state.contractState == 2" v-model="row.productModel" placeholder="请选择产品型号"
                                style="width: 100%" clearable :remote-method="productModeSelect" filterable remote
                                :loading="state.productModelLoading">
                                <el-option v-for=" item  in  state.productModelList " :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                            <span v-else>{{ productModelObj[row?.productModel] }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="china" title="商品中文名" align="center" width="140" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-input v-if="state.contractState == 2" v-model="row.china" clearable placeholder=""
                                style="width: 100%" />
                            <span v-else>{{ row?.china }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="eng" title="商品英文名" align="center" width="220" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-input v-if="state.contractState == 2" v-model="row.eng" clearable placeholder=""
                                style="width: 100%" />
                            <span v-else>{{ row?.eng }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="measurement" title="计量单位" align="center" width="140" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-select v-if="state.contractState == 2" :remote-method="measurementSelect"
                                v-model="row.measurement" placeholder="请选择计量单位" style="width: 100%" clearable filterable
                                remote :loading="state.measurementLoading">
                                <el-option v-for=" item  in  state.measurementList " :key="item.value" :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                            <span v-else>{{ measurementObj[row?.measurement] }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="num" title="数量" align="center" width="140" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-input v-if="state.contractState == 2" type="number" v-model="row.num" clearable
                                placeholder="" style="width: 100%" />
                            <span v-else>{{ row?.num }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="dan" title="单价" align="center" width="140" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-input v-if="state.contractState == 2" type="number" v-model="row.dan" clearable
                                placeholder="" style="width: 100%" />
                            <span v-else>{{ row?.dan }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="money" title="总金额" align="center" width="140" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-input v-if="state.contractState == 2" type="number" v-model="row.money" clearable
                                placeholder="" style="width: 100%" />
                            <span v-else>{{ row?.money }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="xuang" title="箱数" align="center" width="140" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-input v-if="state.contractState == 2" type="number" v-model="row.xuang" clearable
                                placeholder="" style="width: 100%" />
                            <span v-else>{{ row?.xuang }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="zhong" title="毛重" align="center" width="140" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-input v-if="state.contractState == 2" type="number" v-model="row.measurement" clearable
                                placeholder="" style="width: 100%" />
                            <span v-else>{{ row?.measurement }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="jingzhong" title="净重" align="center" width="140" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-input v-if="state.contractState == 2" type="number" v-model="row.jingzhong" clearable
                                placeholder="" style="width: 100%" />
                            <span v-else>{{ row?.jingzhong }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column sortable field="tiji" title="体积" align="center" width="140" showOverflowTooltip>
                        <template #default="{ row }">
                            <el-input v-if="state.contractState == 2" type="number" v-model="row.tiji" clearable
                                placeholder="" style="width: 100%" />
                            <span v-else>{{ row?.tiji }}</span>
                        </template>
                    </vxe-column>
                </AppVxeTable>
            </div>
        </div>
        <el-dialog class="dialog" v-model="state.createBillDialog.show" title="新增商品清单信息" width="1400"
            :before-close="handleClose">
            <div class="form-container">
                <el-form :inline="true" :model="state.createBillDialog.form" label-width="100px" :size="'small'" ref="form">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item prop="company" label="税号">
                                <el-input v-model="state.createBillDialog.form.company" clearable placeholder="请输入"
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="productModel" label="产品型号">
                                <el-select v-model="state.createBillDialog.form.productModel" placeholder="请选择产品型号"
                                    style="width: 100%" :remote-method="productModeSelect" clearable filterable remote
                                    :loading="state.productModelLoading">
                                    <el-option v-for=" item  in  state.productModelList " :key="item.value"
                                        :label="item.label" :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="china" label="商品中文名">
                                <el-input v-model="state.createBillDialog.form.china" clearable placeholder="请输入"
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="eng" label="商品英文名">
                                <el-input v-model="state.createBillDialog.form.eng" clearable placeholder="请输入"
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item prop="measurement" label="计量单位">
                                <el-select v-model="state.createBillDialog.form.measurement"
                                    :remote-method="measurementSelect" placeholder="请选择计量单位" style="width: 100%" clearable
                                    filterable remote :loading="state.measurementLoading">
                                    <el-option v-for=" item  in   state.measurementList " :key="item.value"
                                        :label="item.label" :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="num" label="数量">
                                <el-input v-model="state.createBillDialog.form.num" type="number" clearable
                                    placeholder="请输入" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="dan" label="单价">
                                <el-input v-model="state.createBillDialog.form.dan" type="number" clearable
                                    placeholder="请输入" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="money" label="总金额">
                                <el-input v-model="state.createBillDialog.form.money" type="number" clearable
                                    placeholder="请输入" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="xuang" label="箱数">
                                <el-input v-model="state.createBillDialog.form.xuang" type="number" clearable
                                    placeholder="请输入" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="zhong" label="毛重">
                                <el-input v-model="state.createBillDialog.form.zhong" type="number" clearable
                                    placeholder="请输入" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="jingzhong" label="净重">
                                <el-input v-model="state.createBillDialog.form.jingzhong" type="number" clearable
                                    placeholder="请输入" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item prop="tiji" label="体积">
                                <el-input v-model="state.createBillDialog.form.tiji" type="number" clearable
                                    placeholder="请输入" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="formSave">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup >
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import request from "@/public/request";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from "vuex";
import AppVxeTable from "@/components/AppVxeTable.vue";
const Store = useStore();


const route = useRoute();
const router = useRouter();
console.log(route);

Store.dispatch("tab/modifyTabTitle", {
    path: route.fullPath,
    title: route.query.title,
});

//产品型号

let productModelObj = {
    'EDWC2006': 'EDWC2006',
}


let measurementObj = {
    'KG': 'KG',
}

//公司地址
let companyAddress = [
    { value: 0, label: '宁波市鄞州区东吴镇平塘村' },
    { value: 1, label: '河南省郑州市新郑市孟庄镇新老' },
    { value: 2, label: 'G107连接线北侧新星枣业院内研发中心楼一楼' },
]

//客户地址
let clientAddress = [
    { value: 0, label: '宁波市鄞州区东吴镇平塘村' },
    { value: 1, label: '河南省郑州市新郑市孟庄镇新老' },
    { value: 2, label: 'G107连接线北侧新星枣业院内研发中心楼一楼' },
]






//formRef
const form = ref()


const state = reactive({
    contractState: JSON.parse(route.query.contractState),   //是否草稿 true草稿 false审核
    draftAgain: false,    //是否由审核状态转为草稿
    query: {
        blNo: route.query.id ? route.query.id : '',
        company: route.query.id ? '君禾泵业股份有限公司' : '',
        companyAddress: route.query.id ? '浙江省宁波市奉化区xxxx地址' : '',
        client: route.query.id ? 'Glong italy srl' : '',
        clientAddress: route.query.id ? '浙江省宁波市奉化区xxxx地址' : '',
        tradeClause: route.query.id ? 'DDU' : '',
        transportationMode: route.query.id ? '水路运输' : '',
        destinationCountry: route.query.id ? 'POLAND' : '',
        destinationPort: route.query.id ? 'Gdynia' : '',
        salesman: route.query.id ? '祝仙梅' : '',
        currency: route.query.id ? '人民币' : '',
        recDateTime: route.query.id ? ['2024/04/05', '2024/04/06'] : '',
    },
    rules: {
        blNo: [
            { required: true, message: '', trigger: 'blur' },
        ],
        company: [
            { required: true, message: '', trigger: 'blur' },
        ],
        companyAddress: [
            { required: true, message: '', trigger: 'blur' },
        ],
        client: [
            { required: true, message: '', trigger: 'blur' },
        ],
        clientAddress: [
            { required: true, message: '', trigger: 'blur' },
        ],
        tradeClause: [
            { required: true, message: '', trigger: 'blur' },
        ],
        transportationMode: [
            { required: true, message: '', trigger: 'blur' },
        ],
        destinationCountry: [
            { required: true, message: '', trigger: 'blur' },
        ],
        destinationPort: [
            { required: true, message: '', trigger: 'blur' },
        ],
        salesman: [
            { required: true, message: '', trigger: 'blur' },
        ],
        currency: [
            { required: true, message: '', trigger: 'blur' },
        ],
        recDateTime: [
            { required: true, message: '', trigger: 'blur' },
        ],

    },
    tableData: {       //商品清单table
        data: route.query.isNew === 'true' ? [] : [
            {
                company: 174784474,
                productModel: 'EDWC2006',
                china: '潜水泵',
                eng: 'A batch of garden pump accessories',
                measurement: "KG",
                num: 400,
                dan: 25,
                money: 10000,
                xuang: 10000,
                zhong: 10000,
                jingzhong: 10000,
                tiji: 10000,
                id: 1
            },
            {
                company: 174784474,
                productModel: 'EDWC2006',
                china: '潜水泵',
                eng: 'A batch of garden pump accessories',
                measurement: "KG",
                num: 400,
                dan: 25,
                money: 10000,
                xuang: 10000,
                zhong: 10000,
                jingzhong: 10000,
                tiji: 10000,
                id: 2
            }
        ],
        option: useTableOption(),
    },
    tableLoading: false,  //商品清单table的loading
    createBillDialog: {   //新增商品dialog
        show: false,
        form: {
            company: '',
            productModel: '',
            china: '',
            eng: '',
            measurement: '',
            num: '',
            dan: '',
            money: '',
            xuang: '',
            zhong: '',
            jingzhong: '',
            tiji: '',
        }
    },
    //币种List
    current: [],
    currentLoading: false,   //币种loading
    //公司List
    CompantList: [],
    companyLoading: false,
    //业务员List
    salesman: [],
    salesmanLoading: false,
    //贸易条款
    tradeClause: [],
    tradeClauseLoading: false,
    //运输方式
    transportationMode: [],
    transportationModeLoading: false,
    //运抵国
    destinationCountry: [],
    destinationCountryLoading: false,
    //客户
    client: [],
    clientLoading: false,
    //目的港
    destinationPort: [],
    destinationPortLoading: false,
    //产品型号
    productModelList: [],
    productModelLoading: false,
    //计量单位
    measurementList: [],
    measurementLoading: false

})

//新增按钮
function addCommodity() {
    state.createBillDialog.show = true
}

//删除按钮
function deleteCommodity() {
    if (state.tableData.option.selected.length == 0) {
        return ElMessage.warning('请选择数据')

    }
    console.log(state.tableData.option.selected)
    ElMessageBox.confirm(
        '是否删除?',
        '提示',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    ).then(() => {
        state.tableData.data = state.tableData.data.filter(item => !state.tableData.option.selected.includes(item))
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消成功',
        })
    })
}

//关闭dialog
function handleClose() {
    state.createBillDialog.show = false
    form.value.resetFields()
}

//撤回审核
function Withdrawal() {
    state.contractState = 2
    state.draftAgain = true
}

// 获取币种类型
const getCurrentData = async (val) => {
    console.log(val);
    state.currentLoading = true;
    let res = await request.get("/api/base/currency/dropdownlist", {
        keywords: val,
    });
    state.current = res.map((item) => {
        return {
            label: item.currencyCode + "|" + item.currencyName,
            value: item.currencyCode,
        };
    });
    console.log(state.current);
    state.currentLoading = false;
}

// 获取公司信息
const getCompanyData = async (val) => {
    state.companyLoading = true;
    let res = await request.get("/api/crcontactcompany/querypagedto", {
        PageIndex: 1,
        PageSize: 15,
        ComNameCn: val,
    });
    state.CompantList = res.content;
    state.companyLoading = false;
};

// 获取业务员信息
const getUserData = async (val) => {
    state.salesmanLoading = true;
    let res = await request.get("/api/user/query", {
        PageIndex: 1,
        PageSize: 15,
        KeyWords: val,
    });
    state.salesman = res.content;
    state.salesmanLoading = false;
};

// 获取贸易条款信息
const getTradeTermsData = async (val) => {
    state.tradeClauseLoading = true;
    let res = await request.get("/api/basedictdetail/querypage", {
        PageIndex: 1,
        PageSize: 15,
        DictName: "贸易条款",
        KeyWords: val,
    });
    state.tradeClause = res.content;
    state.tradeClauseLoading = false;
};

// 获取运输方式信息
const getTransportModeData = async (val) => {
    state.transportationModeLoading = true;
    let res = await request.get("/api/basedictdetail/querypage", {
        PageIndex: 1,
        PageSize: 15,
        DictName: "运输方式",
        KeyWords: val,
    });
    state.transportationMode = res.content;
    state.transportationModeLoading = false;
}

// 获取国家信息
const getCountryData = async (val) => {
    state.destinationCountryLoading = true;
    let res = await request.get("/api/cscountry/querypage", {
        PageIndex: 1,
        PageSize: 15,
        KeyWords: val,
    });
    state.destinationCountry = res.content;
    state.destinationCountryLoading = false;
};

// 获取客户信息
const getCustomData = async (val) => {
    state.clientLoading = true;
    let res = await request.get("/api/crcontactcompany/querypagedto", {
        PageIndex: 1,
        PageSize: 15,
        ComNameCn: val,
    });
    state.client = res.content;
    state.clientLoading = false;
};

//目的港
const lineSelect = (query) => {
    state.destinationPortLoading = true;
    request
        .get("/api/csport/querypage", {
            KeyWords: query,
            PageIndex: 1,
            PageSize: 50,
        })
        .then((res) => {
            state.destinationPort = res.content;
        })
        .finally(() => {
            state.destinationPortLoading = false;
        });
}

//产品型号
const productModeSelect = async (val) => {
    state.productModelLoading = true;
    let res = await request.get("/api/basedictdetail/querypage", {
        PageIndex: 1,
        PageSize: 50,
        DictId: '1794975784155222016',
    });
    state.productModelList = res.content;
    state.productModelLoading = false;
}

//计量单位
const measurementSelect = async (val) => {
    state.measurementLoading = true;
    let res = await request.get("/api/basedictdetail/querypage", {
        PageIndex: 1,
        PageSize: 50,
        DictId: '1794982991919845376',
    });
    state.measurementList = res.content;
    state.measurementLoading = false;
}

//保存草稿
function saveDraft() {
    console.log(1111);
    ElMessage.success('保存草稿成功')
    state.contractState = 2
}

//提交去审核
function submit() {
    console.log(1111);
    ElMessage.success('已成功提交')
    state.contractState = 0
}

//form保存
function formSave() {
    console.log(state.createBillDialog.form)
    state.tableData.data.push({
        ...state.createBillDialog.form,
        id: state.tableData.data.length
    })
    handleClose()
}
</script>
<style lang="scss" scoped>
.info {
    width: 100%;
    min-height: 40px;
    border-radius: 2px;
    background: #FFFFFF;
    border: 1px solid #DCDCDC;
    padding: 9px 12px;

    .title {
        display: flex;

        .id {
            color: #000000D8;
            font-size: 15px;
            line-height: 22px;
            letter-spacing: 0px;
            text-align: left;
            font-weight: 500;

        }

        .state {
            display: flex;
            text-align: center;
            margin-left: 12px;

            .draft {
                width: 33px;
                height: 24px;
                border: 1px solid #DCDCDC;
                line-height: 24px;
            }

            .ReviewedState {
                display: flex;

                .ReviewedState-title {
                    width: 57px;
                    height: 24px;
                    line-height: 24px;
                    border-radius: 2px;
                    background: #79B43C0F;
                    border: 1px solid #79B43C;
                    color: #79B43C;

                }

                .toBeReviewed {
                    width: 44px;
                    height: 24px;
                    line-height: 24px;
                    border-radius: 2px;
                    background: #79B43C0F;
                    border: 1px solid #79B43C;
                    color: #79B43C;
                    margin-left: 12px;
                }
            }
        }
    }

    .content {
        margin-top: 10px;
        padding: 0;
    }
}

.handel {
    display: flex;
    width: 100%;
    height: 28px;
    border-radius: 2px;
    background: #FFFFFF;
    border: 1px solid #DCDCDC;
    margin-top: 8px;
    padding: 4px 16px;

    .draft {
        display: flex;

        .draft-item {
            color: #409eff;
            margin-right: 24px;
            cursor: pointer;
        }
    }

    .draft-out {
        color: #409eff;
        cursor: pointer;
    }
}

.contentInfo {
    width: 100%;
    // height: 110px;
    padding: 8px 12px;
    background-color: #FFFFFF;
    margin-top: 8px;

    .title {
        height: 22px;
        font-size: 14px;
        line-height: 22px;
        border-left: 2px solid #409eff;
        padding-left: 4px;
    }


}

.form-container {
    // border: 1px solid #e8e8e8;
    padding: 6px 6px 6px 8px;
    background-color: #ffffff;

    :deep(.el-form-item--small .el-form-item__label) {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.85);
    }

    :deep(.el-input--suffix .el-input__inner) {
        padding-right: 4px;
    }

    :deep(.el-form--inline .el-form-item) {
        display: flex;
        margin-right: 0;
    }

    :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 8px;
    }
}

.content {
    width: 100%;
    padding: 8px 12px;
    background-color: #FFFFFF;
    margin-top: 8px;

    .descriptions {

        .cell-item {

            // position: relative;
            span {
                color: #ff0000;

            }
        }

        :deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
            width: 60px;
            font-weight: unset;
            font-size: 12px;
            padding: 7px 8px;
        }
    }
}

.commodity {
    width: 100%;
    padding: 8px 12px;
    background-color: #FFFFFF;
    margin-top: 8px;

    .title {
        height: 22px;
        font-size: 14px;
        line-height: 22px;
        border-left: 2px solid #409eff;
        padding-left: 4px;
        margin-bottom: 8px;
    }

    .btn {
        margin-bottom: 8px;
    }
}

:deep(.el-dialog) {
    padding: 0 0;
}

:deep(.el-dialog__header) {
    border-bottom: 1px solid #e8e8e8;
    padding: 7px 12px;
    font-family: 800;
}

:deep(.el-dialog__footer) {
    border-top: 1px solid #e8e8e8;
    padding: 8px 0;
    text-align: center;
}

:deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
    padding: 4px 8px !important;
    width: 30px !important;
}

:deep(.el-descriptions__cell) {
    padding-bottom: 10px !important;
}
</style>